<template>
  <div>
      <div class="head">特许权使用费所得税计算器</div>
      <input id="base" v-model="input" type="text" placeholder="请输入金额">
      <div class="calc" @click="calc()">计算</div>
      <div id="result" v-show="result">
          <div>计算结果</div>
          <div class="ritem" v-if="result" v-for="e in result">
              <div>{{e.name}}</div><div>{{e.val}}</div>
          </div>
          <div class="share">分享给好友</div>
      </div>
      <div id="formula">
          <div>计算公式</div>
          <div>
              应纳税所得额 = 特许权使用费（不超过4000元） - 800元<br>
              应纳税所得额 = 特许权使用费（超过4000元）×（1 - 20%）<br>
              应纳税额 = 应纳税所得额 × 20%
          </div>
      </div>
      <div id="table">
          <div>特许权使用费所得简介</div>
          <div>一、征收范围</div>
          <div class="indent">特许权使用费所得，是指个人提供专利权、商标权、著作权、非专利技术及其他特许权的使用权取得的所得；其中，提供著作权的使用权取得的所得，不包括稿酬所得。 作者将自己的文字作品手稿原件或者复印件公开拍卖（竞价）取得的所得，应按特许权使用费的所得项目征收个人所得税。</div>
          <div class="indent">剧本作者从电影、电视剧的制作单位取得的剧本使用费，不再区分剧本的使用方是否为其任职单位，统一按特许权使用费所得项目计征个人所得税。</div>
          <div class="indent">非本单位人员与新闻出版单位人员合作的课题或学术论文 虽未发表但从合作单位取得的所得、个人取得的专利赔偿收入等，均应按特许权使用费所得项目计征个人所得税。</div>
          <div>二、税率</div>
          <div class="indent">特许权使用费所得，适用20%的比例税率。</div>
          <div>三、应纳税所得额及应纳税额的计算</div>
          <div class="indent">特许权使用费所得，以实现使用权或所有权的转移所取得的收入为一次。个人每次取得的收入，定额或定率减除规定费用后的余额为应纳税所得额。每次收入不超过4000元的，减除费用800元；4000元以上的，减除20%的费用，其余额为应纳税所得额。</div>
          <div class="indent">1、每次收入不超过4000元的</div>
          <div class="pindent">应纳税额 = 应纳税所得额×适用税率</div>
          <div class="pindent">或应纳税额 = （每次收入额 - 800元）×20%</div>
          <div class="indent">2、每次收入超过4000元的</div>
          <div class="pindent">应纳税额 = 应纳税所得额×适用税率</div>
          <div class="pindent">或应纳税额 = 应纳税所得额 ×（1 - 20%）×20%</div>
          <div>四、关于"次"的认定</div>
          <div class="indent">特许权使用费所得，以一项特许权的一次许可使用所取得的收入为一次。如果该次转让取得的收入是分笔支付的，则应将各笔收入相加为一次，即合并收入计征个人所得税。</div>
      </div>
      <div id="case">
          <div>案例说明</div>
          <div class="indent">1、张三将自己发明的一项专利技术转让给一家公司，取得收入10万元，成交时支付相关税费共计1万元整，且能提供有效的合法凭证。 那么张三需要缴纳多少个人所得税呢？</div>
          <div class="indent">应纳个人所得税 = （10万 - 1万） × （1 - 20%） × 20% = 14400元。</div>
      </div>
      <div id="counter">
        <div>个税计算器</div>
        <router-link to="/jsq/" tag="div">更多>></router-link>
        <div class="c_box">
          <div class="citem" v-for="(count, i) in counters" :key="count.text[0]" v-if="i < 4">
            <router-link :to="count.url" tag="div">{{count.text[0]}}<br v-if="count.text[1] != ''">{{count.text[1]}}</router-link>
          </div>
        </div>
        <div class="c_box">
          <div class="citem" v-for="(count, i) in counters" :key="count.text[0]" v-if="i >= 4">
            <router-link :to="count.url" tag="div">{{count.text[0]}}<br v-if="count.text[1] != ''">{{count.text[1]}}</router-link>
          </div>
        </div>
      </div>
      <div id="news">
          <div>最新资讯</div>
          <div v-if="msgs">
            <Sitem v-for="msg in msgs" :msg="msg" :key="msg.img"/>
            <more url="/news/"/>
          </div>
      </div>
      <div class="ad"></div>
  </div>
</template>
<script>
import Sitem from "../public/Sitem";
import more from "../public/More";
import { Toast } from "mint-ui";
import { Get, Post, Port } from "../../../server/ajax"
export default {
  data() {
    return {
      input: null,
      result: null,
      counters: [
        {
          url: "/jsq/sqgz.html",
          text: ["税前工", "资计算器"]
        },
        {
          url: "/jsq/shgz.html",
          text: ["税后工", "资计算器"]
        },
        {
          url: "/guangzhoushi_shebao/",
          text: ["社保", "公积金"]
        },
        {
          url: "/jsq/nzj.html",
          text: ["年终奖", ""]
        },
        {
          url: "/jsq/lwbc.html",
          text: ["劳务报", "酬所得"]
        },
        {
          url: "/jsq/cczl.html",
          text: ["财产租赁", "所得税"]
        },
        {
          url: "/jsq/cczr.html",
          text: ["财产转让", "所得税"]
        },
        {
          url: "/jsq/orsd.html",
          text: ["偶然", "所得税"]
        }
      ],
      msgs: null
    };
  },
  components: {
    Sitem,
    more
  },
  methods: {
    calc() {
      if (!this.input || isNaN(this.input)) {
        Toast("无效的收入金额");
        return;
      }
      if (this.input < 800) {
        Toast("收入低于800元，无需纳税。");
        return;
      }
      this.input -= 0
      var A = this.input.toFixed(2);
      var R = 0.2,
        T,
        D = 800;
      if(A > 4000) D = A * 0.2;
      T = A - D;
      var tax = T * R;
      var realIncome = A - tax;

      this.result =  [
        {
          name: "减除费用",
          val: D.toFixed(2) + " 元"
        },
        {
          name: "应纳税所得额",
          val: A + " 元"
        },
        {
          name: "适用税率",
          val: R * 100 + "%"
        },
        {
          name: "应缴税款",
          val: tax.toFixed(2) + " 元"
        },
        {
          name: "税后收入",
          val: realIncome.toFixed(2) + " 元"
        }
      ]
    }
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.msgs = data
    }.bind(this))
  },
  activated() {
    setTimeout(function(){
      this.$parent.updata();
    }.bind(this), 10)
  }
};
</script>
<style scoped>
.head {
  font-size: 0.36rem;
  color: #333;
  text-align: center;
  font-weight: bold;
  margin-top: 1.75rem;
}
input {
  display: block;
  width: 6.9rem;
  margin: 0.38rem auto 0;
  height: 1.1rem;
  border: 0.01rem solid #ccc;
  font-size: 0.32rem;
  line-height: 1.1rem;
  text-indent: 0.4rem;
  color: #333;
  border-radius: 0.1rem;
}
#base {
  margin-top: 0.85rem;
}
.calc {
  height: 1rem;
  width: 6.9rem;
  margin: 0.8rem auto 0;
  text-align: center;
  color: #fff;
  font-size: 0.39rem;
  line-height: 1rem;
  background-color: #ed5172;
  letter-spacing: 0.04rem;
  clear: both;
  border-radius: 0.1rem;
}
#result {
  padding: 0.9rem 0.3rem 1.27rem;
}
#result > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
.ritem {
  font-size: 0.32rem;
  margin-top: 0.2rem;
}
.ritem > div {
  display: inline-block;
  width: 2.5rem;
}
.ritem > div:nth-child(1) {
  color: #666;
}
.ritem > div:nth-child(2) {
  color: #ed5172;
}
.share {
  width: 2.1rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  border: 0.01rem solid #999;
  text-align: center;
  color: #999;
  font-size: 0.28rem;
  line-height: 0.64rem;
  margin: 1.3rem auto 0;
}
#formula {
  background-color: #f4f5f7;
  padding: 1.4rem 0.3rem 0;
  letter-spacing: 0.02rem;
}
#formula > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#formula > div:nth-child(2) {
  font-size: 0.28rem;
  color: #666;
  margin-top: 0.4rem;
}
#table {
  background-color: #f4f5f7;
  padding: 1.1rem 0.3rem 0;
  font-size: 0.28rem;
  color: #666;
  letter-spacing: 0.02rem;
}
#table > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
#table > div {
  margin-top: 0.3rem;
}
.indent {
  text-indent: 0.6rem;
  font-size: 0.28rem;
  color: #666;
  margin-top: 0.4rem;
}
.pindent {
  text-indent: 0.6rem;
  font-size: 0.28rem;
  color: #666;
  /* margin-top: 0.4rem; */
}
table {
  border-collapse: collapse;
  font-size: 0.16rem;
  margin-top: 0.4rem;
}
tbody {
  display: table-row-group;
}
tr {
  display: table-row;
}
td,
th {
  border: 0.01rem solid #a7aeb1;
  padding: 0.1rem;
}
#case {
  background-color: #f4f5f7;
  padding: 1.4rem 0.3rem 1.5rem;
  letter-spacing: 0.02rem;
}
#case > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#case > div:nth-child(2) {
  font-size: 0.28rem;
  color: #666;
  margin-top: 0.4rem;
  word-break: break-all;
}
#counter > div:nth-child(1) {
  margin: 1.45rem 0.3rem 0;
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#counter > div:nth-child(2) {
  margin: 0rem 0.3rem 0.3rem;
  font-size: 0.28rem;
  color: #999;
  text-align: right;
}
.c_box {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.3rem;
  color: #fff;
  justify-content: space-around;
  margin-bottom: 0.28rem;
}
.citem {
  display: table;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ed5172;
  border: 0.01rem #ed3e63;
  text-align: center;
}
.citem > div {
  display: table-cell;
  vertical-align: middle;
}
#news {
  padding-top: 1.4rem;
}
#news > div:nth-child(1) {
  font-size: 0.32rem;
  padding: 0 0.3rem 0.6rem;
  color: #333;
  font-weight: bold;
  border-bottom: 0.01rem solid #e2e2e2;
}
#news > div:nth-child(2) {
  padding: 0 0.3rem 0;
}
.ad {
  width: 6.93rem;
  height: 4.62rem;
  background-image: url("~@/assets/counter/ad.png");
  background-size: cover;
  margin: 0.25rem auto 1.94rem;
}
</style>
